<template>
  <div>
    <div style="display: flex; float: left; width: 70%; background-color: orangered; height: 838px">
      <el-card class="box-card" style="background-color: white; width: 100%">
        <div v-for="(o, index) in tableData.length" :key="o" class="text item">
          <div style="width: 100%; height: 200px; background-color: white">
            <div
              style="
                width: 150px;
                height: 200px;
                background-color: white;
                display: flex;
                float: left;
              "
              @click="movieInfo(index)"
            >
              <el-image style="width: 95%; height: 95%" :src="vals2[index]"> </el-image>
            </div>
            <div
              style="
                width: 641px;
                height: 50px;
                background-color: white;
                display: flex;
                float: left;
              "
            >
              <span style="font-size: x-large; margin-left: 30px" @click="movieInfo(index)">{{
                name[index]
              }}</span>
              <span style="font-size: large; margin-left: 10px; color: orange; margin-top: 5px"
                >{{ star[index] }}分</span
              >
            </div>
            <div
              style="
                width: 641px;
                height: 30px;
                background-color: white;
                display: flex;
                float: left;
              "
            >
              <span style="font-size: small; margin-left: 30px">{{ lab[index] }}</span>
            </div>
            <div
              style="
                width: 641px;
                height: 30px;
                background-color: white;
                display: flex;
                float: left;
              "
            >
              <el-tag type="warning" style="margin-left: 30px">{{ lan[index] }}</el-tag>
              <el-tag type="warning" style="margin-left: 30px">{{ mtype[index] }}</el-tag>
              <el-tag type="warning" style="margin-left: 30px">{{ mtime[index] }}分钟</el-tag>
            </div>
            <div
              style="
                width: 341px;
                height: 30px;
                background-color: white;
                display: flex;
                float: left;
              "
            >
              <span style="font-size: small; margin-left: 30px; margin-top: 10px"
                >导演：{{ dir[index] }}</span
              >
            </div>
            <div
              style="
                width: 341px;
                height: 30px;
                background-color: white;
                display: flex;
                float: left;
              "
            >
              <span style="font-size: small; margin-left: 30px; margin-top: 10px"
                >主演：{{ mrole[index] }}</span
              >
            </div>
            <div
              style="
                width: 241px;
                height: 60px;
                background-color: white;
                display: flex;
                float: right;
              "
            >
              <el-button
                type="primary"
                style="height: 40px; margin-left: 100px; width: 100px"
                @click="buy(index)"
                >立即订票</el-button
              >
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <div style="display: flex; float: left; width: 70%; background-color: white; height: 50px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[4]"
        :page-size="4"
        style="margin-left: 220px"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, defineExpose } from 'vue';
import axios from 'axios';
import router from '@/router/index';
let total = ref(2);
let tableData = ref([]);
const tableAll = ref([]);
let vals2 = ref([]);
const name = ref([]);
const star = ref([]);
const lab = ref([]);
const lan = ref([]);
const dir = ref([]);
const mrole = ref([]);
const mtype = ref([]);
const mtime = ref([]);
const currentPage4 = ref(1);
const len = ref();
const reflash = (index, lens) => {
  for (let i = 0; i < lens.value; i = i + 1) {
    tableData.value.push(tableAll.value[i]);
    let sp = require('../../assets/' + tableAll.value[i + index].pic);
    vals2.value.push(sp);
    name.value.push(tableAll.value[i + index].mname);
    star.value.push(tableAll.value[i + index].rate);
    lab.value.push(tableAll.value[i + index].nickname);
    lan.value.push(tableAll.value[i + index].mlanguage);
    dir.value.push(tableAll.value[i + index].director);
    mrole.value.push(tableAll.value[i + index].mrole);
    mtype.value.push(tableAll.value[i + index].mtype);
    mtime.value.push(tableAll.value[i + index].duration);
  }
};
onMounted(() => {
  axios.get('/api/movie/getMovieByMstate/正在热映').then(res => {
    if (res.data !== null) {
      tableAll.value = res.data;
      total.value = tableAll.value.length;
      len.value = tableAll.value.length > 4 ? 4 : tableAll.value.length;
      reflash(0, len);
    }
  });
});
function movieInfo(index) {
  sessionStorage.setItem('movieInfo', JSON.stringify(name.value[index]));
  router.push('/movieInfo');
}
function buy(index) {
  sessionStorage.setItem('chooseMovie', JSON.stringify(name.value[index]));
  router.push('/Buy');
}
function handleCurrentChange(val) {
  console.log('%%%%%%%%%%%%%%%%%%%');
  console.log(tableAll);
  tableData.value = [];
  name.value = [];
  star.value = [];
  lab.value = [];
  lan.value = [];
  dir.value = [];
  mrole.value = [];
  mtype.value = [];
  mtime.value = [];
  vals2.value = [];
  let index = (val - 1) * 4;
  len.value = total.value - index > 4 ? 4 : total.value - index;
  reflash(index, len);
  currentPage4.value = val;
}
defineExpose({ tableData, tableAll, name, star, lab, lan, dir, mrole, mtype, mtime, vals2, total });
</script>
